<template>
    <el-dialog width="900px" :title="$t('结束订单')" :visible.sync="showEndOrder" :close-on-click-modal="false">
        <div class="end_order">
            <div class="txt_list u-f u-f-ac">
                <span class="lable font14 text_black">{{ $t("订单号") }}：</span>
                <span class="txt font14 text_black">{{ endOrderFrom.order_no }}</span>
            </div>
            <div class="radio_list u-f u-f-ac">
                <span class="lable font14 text_black">{{ $t("是否归还") }}：</span>
                <el-radio v-model="radio" :label="1">{{ $t("已归还") }}</el-radio>
                <el-radio v-model="radio" :label="0">{{ $t("未还") }}</el-radio>
                <span class="tip font14 text_danger" v-if="endOrderFrom.pay_auth_id > 0">{{ $t("此订单为免押租借") }},{{ $t("押金为")
                }}{{ endOrderFrom.deposit }}</span>
                <span class="txt font14 text_blue" @click="openBatteryLog"
                    v-if="permissions.indexOf('/equipment/batteryLog') != -1">{{ $t("查看充氧宝日志") }}</span>
            </div>
            <div class="txt_list u-f u-f-ac">
                <span class="lable font14 text_black">{{ $t("开始时间") }}：</span>
                <span class="txt font14 text_black">{{
                    endOrderFrom.start_time
                }}</span>
            </div>
            <div class="ipt_list u-f u-f-ac" v-show="radio == 1">
                <span class="lable font14 text_black">{{ $t("消费金额") }}：</span>
                <el-input v-model="pay_amount" :placeholder="$t('请输入')"></el-input>
                <span class="txt font14 text_danger">{{
                    $t("请填写该订单消费金额")
                }}</span>
            </div>
            <!-- 11.2 -->
            <div class="ipt_list u-f u-f-ac">
                <span class="lable font14 text_black">备注：</span>
                <el-input v-model="endRemark" :placeholder="$t('请输入')"></el-input>
            </div>
            <div class="ipt_list u-f u-f-ac">
                <span class="lable font14 text_black">选择原因：</span>
                <el-select v-model="clientValRe" :placeholder="$t('请选择')" style="width:150px;">
                    <el-option v-for="item in clientArrRe" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </div>



            <div class="txt_list u-f u-f-ac">
                <span class="lable font14 text_black">{{ $t("使用时长") }}：</span>
                <span class="txt font14 text_black">{{ endOrderFrom.use_time }}</span>
            </div>
            <div class="txt_list u-f">
                <span class="lable font14 text_black">{{ $t("计费标准") }}：</span>
                <ul>
                    <li class="li font14 text_black">
                        {{ $t("免费时长") }}：{{ endOrderFrom.free_time }}{{ $t("分钟") }}
                    </li>
                    <li class="li font14 text_black">
                        {{ $t("收费标准") }}：{{ endOrderFrom.billing }}
                    </li>
                    <li class="li font14 text_black">
                        {{ $t("每天封顶") }}：{{ endOrderFrom.ceiling }}{{ $t("元") }}
                    </li>
                    <li class="li font14 text_black">
                        {{ $t("押金") }}：{{ endOrderFrom.deposit }}{{ $t("元") }}
                    </li>
                </ul>
            </div>

            <el-button size="medium" type="primary" @click="endOrderSubmit">{{
                $t("提交")
            }}</el-button>
        </div>
        <!-- 充氧宝日志 -->
        <el-dialog width="1000px" :title="$t('充氧宝日志')" :visible.sync="batteryLog" append-to-body
            :close-on-click-modal="false">
            <div class="battery_log">
                <el-table :data="logTable">
                    <el-table-column prop="device_id" :label="$t('机柜编号')" width="160"></el-table-column>
                    <el-table-column prop="time" :label="$t('时间')" width="200"></el-table-column>
                    <el-table-column prop="user_type" :label="$t('操作者')" width="120"></el-table-column>
                    <el-table-column prop="memo" :label="$t('备注')"></el-table-column>
                </el-table>
                <div class="pagination_box ">
                    <el-pagination background @current-change="handleLogChange" :current-page="log_page"
                        :page-size="log_page_size" layout="total, prev, pager, next, jumper" :total="log_total">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
        <!-- 充氧宝日志 end -->
    </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import util from "@/assets/js/util.js";
export default {
    props: {
        endOrderFrom: {
            type: Object,
            default: {}
        },
        Radio: {
            type: String | Number,
            default: 1
        },
        payAmount: { //消费金额
            type: String | Number,
            default: "0"
        }
    },
    data() {
        return {
            batteryLog: false, //充氧宝日志模态框开关
            showEndOrder: false,//订单模态框开关
            //分页相关
            log_page: 1,
            log_page_size: 10,
            log_total: 0,
            //表格数据
            logTable: [],
            endRemark:"", // 备注
            clientValRe:"", //原因
            pay_amount:"", //消费金额
            radio: 1,
            clientArrRe: [
                {
                    value: '设备离线',
                    label: '设备离线',
                },
                {
                    value: '用户投诉',
                    label: '用户投诉',
                },
                {
                    value: '还错宝',
                    label: '还错宝',
                },
                {
                    value: '机柜没插电',
                    label: '机柜没插电',
                },
                {
                    value: '没地方归还',
                    label: '没地方归还',
                },
                {
                    value: '机柜充氧宝满',
                    label: '机柜充氧宝满',
                },
            ],
        }
    },
    computed: {
        ...mapState(["permissions"]),
    },
    watch: {
        payAmount(newVal, oldVal) {
            this.pay_amount = newVal
        },
        Radio(newVal, oldVal) {
            this.radio = newVal
        }
    },
    methods: {
        show() {
            this.showEndOrder = true
        },
        hide() {
            this.showEndOrder = false
            this.reset()
        },
        //查看充氧宝日志
        openBatteryLog() {
            this.batteryLog = true;
            setTimeout(() => {
                this.getLogData();
            }, 150);
        },
        // 结束订单提交
        endOrderSubmit(){
            if (!this.endRemark && !this.clientValRe) {
                this.$message.error('请输入备注并选择原因');
                return
            }
            if (!this.endRemark || !this.clientValRe) {
                if (!this.endRemark) {
                    this.$message.error('请输入备注');
                } else {
                    this.$message.error('请选择原因');
                }
                return
            }
            this.$emit('endOrderSubmit', {
                pay_amount: this.pay_amount,
                endRemark: this.endRemark,
                clientValRe: this.clientValRe,
                radio:this.radio,
                order_no: this.endOrderFrom.order_no,
                hide:this.hide
            })
        },
        //请求日志的数据
        getLogData() {
            util
                .$http("/equipment/batteryLog?page=" + this.log_page, {
                    page_size: this.log_page_size,
                    battery_id: this.endOrderFrom.battery_id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.log_total = res.data.total;
                        this.logTable = res.data.list;
                    }
                });
        },
        //切换分页
        handleLogChange(val) {
            this.log_page = Number(val);
            this.getLogData();
        },
        //重置数据
        reset(){
            // this.pay_amount = 0;
            this.radio = 1;
            this.endRemark = ''
            this.clientValRe = ''
        }
    }
}
</script>

<style scoped>
.pagination_box {
  padding-top: 30px;
}

.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}


.end_order {
  padding-left: 50px;
}

.end_order .txt_list {
  margin-bottom: 20px;
}

.end_order .txt_list .lable {
  display: inline-block;
  width: 80px;
}

.end_order .txt_list ul {
  padding: 0;
  margin: 0;
}

.end_order .txt_list .li {
  margin-bottom: 5px;
  list-style: none;
}

.end_order .radio_list {
  margin-bottom: 20px;
}

.end_order .radio_list .lable {
  display: inline-block;
  width: 80px;
}

.end_order .radio_list .txt {
  margin-left: 20px;
  cursor: pointer;
}

.end_order .ipt_list {
  margin-bottom: 20px;
}

.end_order .ipt_list .lable {
  display: inline-block;
  width: 80px;
}

.end_order .ipt_list .el-input {
  width: 150px;
  margin-right: 15px;
}

.end_order .textarea_list .lable {
  display: inline-block;
  width: 80px;
}

.end_order .textarea_list .el-textarea {
  width: 360px;
}

.end_order .el-button {
  margin-top: 30px;
  margin-left: 80px;
}
.end_order .textarea_list .el-textarea__inner {
  min-height: 90px !important;
}

.end_order .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
}

.order_no {
  display: flex;
}

.danger {
  color: red;
}

</style>